<!doctype html>
<html>

<head>
  <title>Upload something!</title>
  <style>
    .button {
      display: block;
      width: 100%;
      align-items: center;
      appearance: none;
      background-color: #3EB2FD;
      background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
      background-size: calc(100% + 20px) calc(100% + 20px);
      border-radius: 100px;
      border-width: 0;
      box-shadow: none;
      box-sizing: border-box;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-flex;
      font-family: CircularStd, sans-serif;
      font-size: 1rem;
      height: auto;
      justify-content: center;
      line-height: 1.5;
      padding: 6px 20px;
      position: relative;
      text-align: center;
      text-decoration: none;
      transition: background-color .2s, background-position .2s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      vertical-align: top;
      white-space: nowrap;
    }

    .button:active,
    .button:focus {
      outline: none;
    }

    .button:hover {
      background-position: -20px -20px;
    }

    .button:focus:not(:active) {
      box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
    }

    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .wrapper {
      height: 100vh;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      width: 100vw;
      display: grid;
      justify-content: center;
      align-items: center;
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  </style>
  <style>
    .drop-container {
      position: relative;
      display: flex;
      gap: 10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 200px;
      padding: 20px;
      border-radius: 10px;
      border: 2px dashed #555;
      color: #444;
      cursor: pointer;
      transition: background .2s ease-in-out, border .2s ease-in-out;
    }

    .drop-container:hover,
    .drop-container.drag-active {
      background: #eee;
      border-color: #111;
    }

    .drop-container:hover .drop-title,
    .drop-container.drag-active .drop-title {
      color: #222;
    }

    .drop-title {
      color: #444;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      transition: color .2s ease-in-out;
    }

    input[type=file] {
      width: 350px;
      max-width: 100%;
      color: #444;
      padding: 5px;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #555;
    }

    input[type=file]::file-selector-button {
      margin-right: 20px;
      border: none;
      background: #084cdf;
      padding: 10px 20px;
      border-radius: 10px;
      color: #fff;
      cursor: pointer;
      transition: background .2s ease-in-out;
    }

    input[type=file]::file-selector-button:hover {
      background: #0d45a5;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <form action="/upload" method="post" enctype="multipart/form-data">
      <label for="images" class="drop-container" id="dropcontainer">
        <span class="drop-title">拖拽至此</span>
        或
        <input name="file" type="file" id="images" required>
      </label>

      <div>
        <input class="button" type="submit" value="Upload files">
      </div>
    </form>
  </div>
</body>
<script>
  const dropContainer = document.getElementById("dropcontainer")
  const fileInput = document.getElementById("images")

  dropContainer.addEventListener("dragover", (e) => {
    // prevent default to allow drop
    e.preventDefault()
  }, false)

  dropContainer.addEventListener("dragenter", () => {
    dropContainer.classList.add("drag-active")
  })

  dropContainer.addEventListener("dragleave", () => {
    dropContainer.classList.remove("drag-active")
  })

  dropContainer.addEventListener("drop", (e) => {
    e.preventDefault()
    dropContainer.classList.remove("drag-active")
    fileInput.files = e.dataTransfer.files
  })
</script>

</html>